import { Component, Vue, Prop, PropSync } from 'vue-property-decorator'
import Styles from './styles.less'
import Style from '../../views/NewApply/ApplyDetail.less'
import SelectCard, { ICardOption } from './selectCard'

@Component({})
export default class SelectDialog extends Vue {
  @PropSync('dialogVisible', { default: false }) private visible!: boolean
  @Prop({ default: () => [] }) private options!: ICardOption[]
  @Prop({ default: '提示' }) private title!: string

  handleClose() {
    this.visible = false
  }

  handleClick(v: ICardOption) {
    this.$emit('selected', v)
  }

  protected render() {
    return (
      <div class={[Style.sealDetail, Styles.selectDialog]}>
        <el-dialog
          title={this.title}
          custom-class="custom-dialog"
          visible={this.visible}
          width="475px"
          before-close={this.handleClose}
        >
          {this.options.map(option => {
            return <SelectCard option={option} onclicked={this.handleClick} />
          })}
        </el-dialog>
      </div>
    )
  }
}
